<template>
	<div>
		<canvas width="200" height="200" id="canvas"	ref="canvas"></canvas>
	</div>
</template>
<script type="text/javascript">
	import { Game, GameObject } from '@eva/eva.js'
	import { RendererSystem } from '@eva/plugin-renderer'
	import { Graphics, GraphicsSystem } from '@eva/plugin-renderer-graphics'
	import { Render, RenderSystem } from '@eva/plugin-renderer-render'
	import { Transition, TransitionSystem } from '@eva/plugin-transition'
	import { Event,EventSystem, HIT_AREA_TYPE } from '@eva/plugin-renderer-event'
	export default{
		name: 'EvajsStudyShowGraphics',
		data(){
			return {
				percent: 0,
				game: null
			}
		},
		created(){
			this.$nextTick(()=>{
				this.ShowGraphics()
			})
		},
		destroyed(){
			if(this.game){
				this.game.destroy()
			}
		},
		methods:{
			ShowGraphics(){
				// 创建游戏
				this.game = new Game({
					systems: [ // 游戏添加渲染系统
						new RendererSystem({
							canvas: this.$refs.canvas,
							width: 400,
							height: 400,
						}),
						// 游戏图形系统
						new GraphicsSystem(),
						new RenderSystem(),
						new TransitionSystem(),
						new EventSystem()
					],
				});
				this.showRect(this.game)
			},
			showRect(game){
				// 游戏对象
				const rect = new GameObject('rect', {
					position: {
						x: 50,
						y: 50
					},
					size: {
						width: 300,
						height: 20
					}
				})
				// 游戏对象内添加文本内容
				const outterGraphics = rect.addComponent(new Graphics())
				outterGraphics.graphics.beginFill(0xde0000, 1)
				outterGraphics.graphics.drawRect(0, 0, 50, 50)
				outterGraphics.graphics.endFill()

				const evt = rect.addComponent(
					new Event({
						hitArea: {
							type: HIT_AREA_TYPE.Rect,
							style: {
								x:0,
								y:0,
								width:50,
								height:50
							}
						}
					})
				)
				let touched = false;
				evt.on('touchstart', e => {
					console.log(e);
					console.log('touchstart');
					touched = true;
				});
				evt.on('touchend', e => {
					console.log('touchend');
					touched = false;
				});
				evt.on('touchmove', e => {
					if (touched) {
						const transform = e.gameObject.transform;
						console.log('touchmove');
						console.log(
							transform.size.width * (1 - transform.origin.x),
							transform.size.height * (1 - transform.origin.y),
						);
						transform.position = e.data.position;
					}
				});
				game.scene.addChild(rect);
			}
		}
	}
</script>